/**
 * 初始化界面
 * @constructor
 */
class InitBaidu {
  public doms: {
    accountLogin: JQuery;
    clearInput: JQuery;
    changeColor: JQuery;
    loginFloatLayer: JQuery;
    closeHeader: JQuery;
    login: JQuery;
    list: JQuery;
    noteLogin: JQuery;
    submit_btn: JQuery;
    crmeraDialog: JQuery;
    input: JQuery;
    changeHotSearch: JQuery;
    camera: JQuery;
    selectFile: JQuery;
    cameraClose: JQuery;
  };
  private changeColorIndex: number;
  private lastInputValue: string;
  private listItemsIndex: number;
  private isOpenCamera: boolean;
  private readonly listItems: string[] = [
    "<span class='num1'>1</span>&nbsp;江泽民同志逝世 享年96岁",
    "<span class='num2'>2</span>&nbsp;江泽民同志治丧委员会名单",
    "<span class='num3'>3</span>&nbsp;江泽民同志遗像发布",
    "<span class='num'>4</span>&nbsp;神十五成功对接空间站组合体",
    "<span class='num'>5</span>&nbsp;联合国安理会为江泽民默哀一分钟",
    "<span class='num'>6</span>&nbsp;北京天安门等地下半旗为江泽民志哀",
    "<span class='num'>7</span>&nbsp;街道工作人员上门打人 湖南浏阳通报",
    "<span class='num'>8</span>&nbsp;被法子英劳荣枝案改变的人生",
    "<span class='num'>9</span>&nbsp;广州番禺：解除所有防控临时管控区",
    "<span class='num'>10</span>&nbsp;官方：全国快递网点大面积停摆不实热",
    "<span class='num'>11</span>&nbsp;冷空气发威 上海已见初雪",
    "<span class='num'>12</span>&nbsp;韩国队输球后炸鸡啤酒股价暴跌",
    "<span class='num'>13</span>&nbsp;揭秘核子基因10年“带病”狂奔路",
    "<span class='num'>14</span>&nbsp;欧阳娜娜自创品牌被指“割韭菜”",
    "<span class='num'>15</span>&nbsp;劳荣枝不服死刑判决庭上态度嚣张",
    "<span class='num'>16</span>&nbsp;梅德韦杰夫称北约应忏悔并解散",
    "<span class='num'>17</span>&nbsp;亚洲第一球星正在被韩国网民网暴",
    "<span class='num'>18</span>&nbsp;贝克汉姆在卡塔尔酒店房间内景曝光",
    "<span class='num'>19</span>&nbsp;专家：核酸检测公司该不该上市",
    "<span class='num'>20</span>&nbsp;上海收紧防控 部分区通知储备物资",
    "<span class='num'>21</span>&nbsp;宝沃汽车正式宣告破产",
    "<span class='num'>22</span>&nbsp;劳荣枝案时间线",
    "<span class='num'>23</span>&nbsp;老人养的近4000只鸭子被投毒",
    "<span class='num'>24</span>&nbsp;“小馄饨皮”王子的父亲",
  ];

  constructor() {
    this.doms = {
      accountLogin: $(".account-login"),
      noteLogin: $(".note-login"),
      loginFloatLayer: $(".login-float-layer"),
      closeHeader: $(".close-header"),
      login: $(".login"),
      changeColor: $(".button"),
      submit_btn: $(".submit-btn"),
      changeHotSearch: $("#change"),
      list: $(".item"),
      camera: $(".camera"),
      crmeraDialog: $(".crmera-dialog"),
      selectFile: $(".select-file"),
      cameraClose: $(".close"),
      input: $(".input"),
      clearInput: $(".clear-input"),
    };

    this.changeColorIndex = 0;
    this.lastInputValue = "";
    this.listItemsIndex = 6;
    this.isOpenCamera = false;
  }

  /**
   * 切换CSS显示样式
   * @param element 切换样式的元素
   * @param type 显示效果
   */
  switchCSS = (element: JQuery, type: "none" | "block") => {
    element.css({display: type});
  };

  /**
   * 改变切换颜色按钮样式
   * @param circle
   * @param offset
   * @param bottomEllipse
   * @param color
   */
  changeColorBtnStyle = (circle: JQuery, offset: number,
                         bottomEllipse: JQuery, color: string) => {
    circle.css({
      left: `${offset}px`,
    });
    bottomEllipse.css({
      backgroundColor: color,
    });
  };

  /**
   * 切换颜色按钮的单击响应函数
   */
  switchColorBtnClick = () => {
    this.changeColorIndex++;
    let grayscale =
      this.changeColorIndex % 2 === 0 ? "grayscale(1)" : "grayscale(0)";
    $("html").css({
      filter: `${grayscale}`,
    });
    let circle = this.doms.changeColor.children(".circle");
    let bottomEllipse = this.doms.changeColor.children(".bottom-ellipse");
    if (baidu.changeColorIndex % 2 === 0) {
      this.changeColorBtnStyle(circle, 0, bottomEllipse, "gray");
    } else {
      this.changeColorBtnStyle(circle, 30, bottomEllipse, "#007afe");
    }
  };

  /**
   * 切换登录方式
   */
  switchLogin = () => {
    this.doms.accountLogin.toggleClass("active");
    this.doms.noteLogin.toggleClass("active");
  };

  /**
   * 搜索内容
   */
  search = () => {
    let commitValue = baidu.doms.input.val() as string;
    window.open(`https://cn.bing.com/search?q=${commitValue}`);
  };

  /**
   * 添加文件弹出框
   */
  addFile = () => {
    let file = $("<input class='myadd' type='file'/>");
    file.css({
      display: "none",
    });
    $("body").append(file);
    file.trigger("click");
    file.remove();
  };

  /**
   * 清除搜索内容框的内容
   */
  clearSearchContext = () => {
    this.doms.input.val("");
    this.switchCSS(this.doms.clearInput, "none");
  };

  /**
   * 显示清除搜索框按钮
   */
  showClearInput = () => {
    this.doms.input.val() && !this.isOpenCamera
      ? this.switchCSS(this.doms.clearInput, "block")
      : this.switchCSS(this.doms.clearInput, "none");
  };

  /**
   * 改变热搜显示
   */
  changeHotSearch = () => {
    for (let i = 0; i < this.doms.list.length; i++) {
      this.doms.list.eq(i).html(this.listItems[this.listItemsIndex]);
      this.listItemsIndex++;
      if (this.listItemsIndex === this.listItems.length) {
        this.listItemsIndex = 0;
      }
    }
  };

  /**
   * 打开图片界面
   */
  openCamera = () => {
    this.switchCSS(baidu.doms.clearInput, "none");
    this.switchCSS(baidu.doms.camera, "none");
    this.switchCSS(baidu.doms.crmeraDialog, "block");
    this.lastInputValue = baidu.doms.input.val() as string;
    this.doms.input.attr("placeholder", "在此处粘贴图片网址");
    this.doms.input.val("");
    this.isOpenCamera = true;
  };

  /**
   * 关闭图片界面
   */
  closeCamera = () => {
    baidu.switchCSS(baidu.doms.camera, "block");
    baidu.switchCSS(baidu.doms.clearInput, "block");
    baidu.switchCSS(baidu.doms.crmeraDialog, "none");
    baidu.doms.input.attr("placeholder", "");
    baidu.doms.input.val(baidu.lastInputValue);
    this.isOpenCamera = false;
  };

  /**
   * 点击其他地方关闭图片界面
   * @param event
   */
  elseCloseCamera = (event: JQuery.ClickEvent) => {
    let arr = Array.from(this.doms.crmeraDialog[0].children) as HTMLElement[];
    if (
      event.target === this.doms.input[0] ||
      event.target === this.doms.camera[0] ||
      event.target === this.doms.crmeraDialog[0] ||
      event.target.className === "myadd" ||
      arr.includes(event.target)
    ) {
      return;
    }
    if (this.doms.crmeraDialog.css("display") === "block") {
      this.doms.cameraClose.trigger("click");
    }
  };
}

let baidu = new InitBaidu();

baidu.doms.accountLogin.on("click", baidu.switchLogin);
baidu.doms.noteLogin.on("click", baidu.switchLogin);
baidu.doms.closeHeader.on("click", () => {
  baidu.switchCSS(baidu.doms.loginFloatLayer, "none");
});
baidu.doms.login.on("click", () => {
  baidu.switchCSS(baidu.doms.loginFloatLayer, "block");
});
baidu.doms.input.on("keydown", (event) => {
  if (event.key === "Enter") {
    baidu.search();
  }
});
baidu.doms.input.on("keyup", baidu.showClearInput);

baidu.doms.changeColor.on("click", baidu.switchColorBtnClick);
baidu.doms.submit_btn.on("click", baidu.search);
baidu.doms.changeHotSearch.on("click", baidu.changeHotSearch);
baidu.doms.camera.on("click", baidu.openCamera);
baidu.doms.cameraClose.on("click", baidu.closeCamera);
baidu.doms.selectFile.on("click", baidu.addFile);
baidu.doms.clearInput.on("click", baidu.clearSearchContext);

/**
 * 点击页面其他地方关闭图片框
 */
$(window).on("click", (event) => {
  baidu.elseCloseCamera(event);
})